<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加二维码' : '修改二维码'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="150px">
      <el-form-item label="标题" prop="qrTitle">
        <el-input v-model="form.qrTitle" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="二维码内容" prop="qrContent">
        <el-input v-model="form.qrContent" placeholder="请输入二维码内容" />
      </el-form-item>
      <el-form-item label="开关" prop="status">
        <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="是否需要推广人员" prop="needBd">
        <el-switch v-model="form.needBd" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <!-- <el-form-item label="关联二维码组" class="item">
        <div class="item_flex">
          <div class="flex" style="margin-right:20px;" v-if="contentName">{{contentName}}</div>
          <el-button size="mini" type="primary" icon="el-icon-circle-plus" @click="add()">选择二维码组</el-button>
        </div>
      </el-form-item> -->
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="form.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择开始时间" align="right" />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择结束时间" align="right" />
      </el-form-item>
      <el-form-item label="是否有时效性" prop="timeEffectiveSwitch">
        <el-switch v-model="form.timeEffectiveSwitch" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="时效时长（分钟）" prop="timeEffectiveDuration">
        <el-input v-model="form.timeEffectiveDuration" placeholder="请输入时效时长（分钟）" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
    <ChooseDialog v-if="ChooseVisible" ref="groupChoose" @getValue="getValue" />
  </el-dialog>
</template>

<script>

import debounce from 'lodash/debounce'
import { qrcodeContentSave, getQrcodeContent, qrcodeContentBindGroup } from "@/api/basic/qrcodeContent"
import ChooseDialog from '../qrcodeGroup/chooseDialog.vue'
export default {
  data() {
    return {
      visible: false,
      form: {
        id: null,
        qrTitle: '',
        qrContent: '',
        status: '',
        needBd: '',
        qrGroupId: '',
        startTime: '',
        endTime: '',
        timeEffectiveSwitch: '',
        timeEffectiveDuration: '',
        contentId: ''
      },
      queryParams: {},
      confirmLoading: false,
      ChooseVisible: false,
      contentName: ''
    }
  },
  components: {
    ChooseDialog
  },
  computed: {
    dataRule() {
      return {
        qrTitle: [
          { required: true, message: '请输入标题', trigger: 'change' }
        ],
        qrContent: [
          { required: true, message: '请输入二维码内容', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择开关', trigger: 'change' }
        ],
        needBd: [
          { required: true, message: '请选择是否需要推广人员', trigger: 'change' }
        ],
        qrGroupId: [
          { required: true, message: '请选择二维码组id', trigger: 'change' }
        ],
      }

    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 选择对应的二维码组
    add() {
      this.ChooseVisible = true
      this.$nextTick(() => {
        this.$refs.groupChoose.init()
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        qrTitle: '',
        qrContent: '',
        status: '',
        needBd: '',
        qrGroupId: '',
        startTime: '',
        endTime: '',
        timeEffectiveSwitch: '',
        timeEffectiveDuration: '',
        contentId: '',
      };
    },
    // 选择的二维码组
    getValue(value) {
      this.contentName = value.name
      this.form.contentId = value.id
    },
    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getQrcodeContent(id).then(response => {
        this.form = response.data
      });
    },
    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true

          qrcodeContentSave(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.visible = false
            this.confirmLoading = false
            this.$emit('refreshDataList')
          }).catch(() => {
            this.confirmLoading = false
          });
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  ::v-deep .el-form-item__content {
    margin-left: 0px !important;
  }
  .item_flex {
    display: flex;
    align-items: center;
    .flex {
      line-height: 20px;
    }
  }
}
</style>
